<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>计费明细管理</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="decorator" content="ani"/>
	<%@ include file="/webpage/include/bootstraptable.jsp"%>
	<%@include file="/webpage/include/treeview.jsp" %>
	<%@include file="detailList.js" %>
	<script type="text/javascript">
        $(document).ready(function() {
            <%-- 初始化查询框的时间--%>
            initSearchBoxDateVar();
        });
        function initSearchBoxDateVar() {
            $("#startDate").val("<fmt:formatDate value="${startDate}" pattern="yyyy-MM-dd"/>");
            $("#endDate").val("<fmt:formatDate value="${endDate}" pattern="yyyy-MM-dd"/>");
        }

	</script>
</head>
<body>
	<div class="wrapper wrapper-content">
	<div class="panel panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title">计费明细列表</h3>
	</div>
	<div class="panel-body">
		<sys:message content="${message}"/>
	
	<!-- 搜索 -->
	<div class="accordion-group">
	<div id="collapseTwo" class="accordion-body collapse">
		<div class="accordion-inner">
			<form:form id="searchForm" modelAttribute="detail" class="form form-horizontal well clearfix">
			 <div class="col-xs-12 col-sm-6 col-md-4">
				<label class="label-item single-overflow pull-left" title="状态：">状态：</label>
				<form:select path="status"  class="form-control m-b">
					<form:option value="" label=""/>
					<form:options items="${fns:getDictList('detail_status')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
				</form:select>
			</div>
			 <div class="col-xs-12 col-sm-6 col-md-4">
				<label class="label-item single-overflow pull-left" title="结算方：">结算方：</label>
				<sys:gridselect url="${ctx}/fee/consignor/data" id="clearUnit" name="clearUnit.id" value="${detail.clearUnit.id}" labelName="clearUnit.name" labelValue="${detail.clearUnit.name}"
					title="选择结算方" cssClass="form-control required" fieldLabels="结算方" fieldKeys="name" searchLabels="结算方" searchKeys="name" ></sys:gridselect>
			</div>
			 <div class="col-xs-12 col-sm-6 col-md-4">
				<label class="label-item single-overflow pull-left" title="数据源的所有表头：">业务属性：</label>
				<form:input path="codes" htmlEscape="false" maxlength="300"  class=" form-control"/>
			</div>
		 <div class="col-xs-12 col-sm-6 col-md-4">
			<div style="margin-top:26px">
			  <a  id="search" class="btn btn-primary btn-rounded  btn-bordered btn-sm"><i class="fa fa-search"></i> 查询</a>
			  <a  id="reset" class="btn btn-primary btn-rounded  btn-bordered btn-sm" ><i class="fa fa-refresh"></i> 重置</a>
			 </div>
	    </div>	
	</form:form>

	</div>
	</div>
	</div>
	
	<!-- 工具栏 -->
	<div id="toolbar">
			<shiro:hasPermission name="fee:detail:add">
				<a id="add" class="btn btn-primary" href="${ctx}/fee/detail/form" title="计费明细"><i class="glyphicon glyphicon-plus"></i> 新建</a>
			</shiro:hasPermission>
			<shiro:hasPermission name="fee:detail:edit">
			    <button id="edit" class="btn btn-success" disabled onclick="edit()">
	            	<i class="glyphicon glyphicon-edit"></i> 修改
	        	</button>
			</shiro:hasPermission>
			<%--<shiro:hasPermission name="fee:detail:del">
				<button id="remove" class="btn btn-danger" disabled onclick="deleteAll()">
	            	<i class="glyphicon glyphicon-remove"></i> 删除
	        	</button>
			</shiro:hasPermission>--%>
		<button class="btn btn-white " data-toggle="tooltip" data-placement="left" onclick="goBalance()" title="结算"><i class="fa fa-building-o icon"></i> 结算</button>
			<%--<shiro:hasPermission name="fee:detail:import">
				<button id="btnImport" class="btn btn-info"><i class="fa fa-folder-open-o"></i> 导入</button>
				<div id="importBox" class="hide">
						<form id="importForm" action="${ctx}/fee/detail/import" method="post" enctype="multipart/form-data"
							 style="padding-left:20px;text-align:center;" ><br/>
							<input id="uploadFile" name="file" type="file" style="width:330px"/>导入文件不能超过5M，仅允许导入“xls”或“xlsx”格式文件！<br/>　　
							
							
						</form>
				</div>
			</shiro:hasPermission>--%>
	        	<a class="accordion-toggle btn btn-default" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
					<i class="fa fa-search"></i> 检索
				</a>
		    </div>
		当前页面汇总：<label style="color:#f1a73d;font-weight:bold;">￥${sumMoney}</label>元&nbsp;&nbsp;|&nbsp;&nbsp;
		选中项汇总：<label id="selectMoney" name="selectMoney" style="color:#f1a73d;font-weight:bold;"></label>元
	<!-- 表格 -->
	<table id="detailTable"   data-toolbar="#toolbar"></table>

    <!-- context menu -->
    <ul id="context-menu" class="dropdown-menu">
    	<shiro:hasPermission name="fee:detail:edit">
        <li data-item="edit"><a>编辑</a></li>
        </shiro:hasPermission>
        <shiro:hasPermission name="fee:detail:del">
        <li data-item="delete"><a>删除</a></li>
        </shiro:hasPermission>
        <li data-item="action1"><a>取消</a></li>
    </ul>  
	</div>
	</div>
	</div>
	<%-- 模态框（Modal） --%>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width:500px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">调整信息</h4>
				</div>
				<div class="modal-body"  style="height:200px;">
					<table class="table table-bordered  table-condensed dataTables-example dataTable no-footer">
						<tbody>
						<tr>
							<td class="width-30 active"><label class="pull-right">调整原因：</label></td>
							<td class="width-70">
								<input id="update_reason" type="text" value="" readonly="true"  class="form-control  number"/>
							</td>
						</tr>
						<tr>
							<td class="width-30 active"><label class="pull-right">调整时间：</label></td>
							<td class="width-70">
								<input id="update_date" type="text" value=""readonly="true"  class="form-control  number"/>
							</td>
						</tr>
						</tbody>
					</table>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
	<%-- 模态框（Modal）应付 --%>
	<div class="modal fade" id="payModal" tabindex="-1" role="dialog" aria-labelledby="payable" aria-hidden="true">
		<div class="modal-dialog" style="width: 750px">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="payable">应付结算单</h4>
				</div>
				<div class="modal-body">
					<table class="table table-bordered  table-condensed dataTables-example dataTable no-footer">
						<tbody>
						<tr>
							<td class="width-12 active"><label class="pull-right"><font color="red">*&nbsp;</font>结算方：</label></td>
							<td class="width-21">
								<input id="modalpayClearUnit" type="text"  readonly="true"  class="form-control"/>
							</td>
							<td class="width-12 active"><label class="pull-right">结算金额：</label></td>
							<td class="width-21">
								<input name="clearingMoney" id="payMoney" type="text"readonly="true" class="form-control  number"/>
							</td>
						</tr>
						<tr>
							<td class="width-12 active"><label class="pull-right">备注信息：</label></td>
							<td class="width-21">
								<input name="remarks" id="payRemark" class="form-control "/>
							</td>
						</tr>
						</tbody>
					</table>
					<div  class="tableBox">
						<table id="contentTabl" class="table table-striped table-bordered table-hover table-condensed dataTables-example dataTable">
							<thead>
							<tr>
								<th> <input type="checkbox" class="i-checks"></th>
								<th>序号</th>
								<th  class="sort-column busyDate">业务日期</th>
								<th  class="sort-column feeAgreement.id">计费合同</th>
								<th  class="sort-column feeType.id">费用类型</th>
								<th  class="sort-column payMoney">计费金额</th>
								<th  class="sort-column clearingMoney">调整金额</th>
								<th>调整差额</th>
								<th>操作</th>
							</tr>
							</thead>
							<tbody id="payDetailTbody">
							</tbody>

						</table>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" id="payConfirmClose">确定</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
	<%-- 模态框（Modal）应收 --%>
	<div class="modal fade" id="receiveModal" tabindex="-1" role="dialog" aria-labelledby="receivable" aria-hidden="true">
		<div class="modal-dialog" style="width: 750px">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="receivable">应收结算单</h4>
				</div>
				<div class="modal-body">
					<table class="table table-bordered  table-condensed dataTables-example dataTable no-footer">
						<tbody>
						<tr>
							<td class="width-12 active"><label class="pull-right"><font color="red">*&nbsp;</font>结算方：</label></td>
							<td class="width-21">
								<input id="modalreceiveClearUnit" type="text"  readonly="true"  class="form-control"/>
							</td>
							<td class="width-12 active"><label class="pull-right">结算金额：</label></td>
							<td class="width-21">
								<input name="clearingMoney" id="receiveMoney" type="text" readonly="true" class="form-control  number"/>
							</td>
						</tr>
						<tr>
							<td class="width-12 active"><label class="pull-right">备注信息：</label></td>
							<td class="width-21">
								<input name="receiveRemark" id="receiveRemark" class="form-control "/>
							</td>
						</tr>
						</tbody>
					</table>
					<div  class="tableBox">
						<table id="contentTable"
							   class="table table-striped table-bordered table-hover table-condensed dataTables-example dataTable">
							<thead>
							<tr>
								<th><input type="checkbox" class="i-checks"></th>
								<th>序号</th>
								<th class="sort-column busyDate">业务日期</th>
								<th class="sort-column feeAgreeName.id">计费协议</th>
								<th class="sort-column feeType.id">费用类型</th>
								<th class="sort-column payMoney">计费金额</th>
								<th  class="sort-column clearingMoney">调整金额</th>
								<th>调整差额</th>
								<th>操作</th>
							</tr>
							</thead>
							<tbody id="receiveDetailTbody">
							</tbody>
						</table>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" id="receiveConfirmClose">确定</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
</body>
</html>